<template>
  <div class="addCategory">
    <a-form
    :model="bookmark"
    name="basic"
    autocomplete="off"
  >
    <a-form-item
      label="分类名称"
      name="title"
      :rules="[{ required: true, message: '分类名称不能为空！' }]"
    >
      <a-input v-model:value="bookmark.title" />
    </a-form-item>

    <a-form-item
      label="分类目录"
      :rules="[{ required: true, message: '分类目录不能为空！' }]"
    >
      <a-tree-select
      v-model:value="value"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="请选择"
      :fieldNames="{value: 'cid', title: 'title'}"
      tree-node-filter-prop="title"
      allow-clear
      tree-default-expand-all
      :tree-data="topBookmarkClassList"
      >
      </a-tree-select>
    </a-form-item>

      <a-button class="btn" type="primary" html-type="submit" @click="bookmarkAddCategory(bookmark)" :disabled="bookmark.title==='' || !value">添加</a-button>
    </a-form>
    </div>
</template>

<script> 
import { reactive,computed,ref,watch } from "vue"; 
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name:'BookmarkClass-addCategory',
    setup() {
        const store = useStore();
        const router = useRouter();
        let topBookmarkClassList = computed(()=>{
            return store.getters.topTreeData
        })
        const bookmark = reactive({
            title:'',
            pid:''
        });
        const bookmarkAddCategory = data=>{
            store.dispatch('bookmarkClass/asyncAddCategory', data)
            bookmark.title = ''
            bookmark.pid = ''
            router.push({name:'BookmarkClass-getAll'})
        }

        const value = ref()  
        watch(value, () => {
            bookmark.pid = value.value
            console.log(bookmark.pid);
        });
        return {
            bookmark,bookmarkAddCategory,topBookmarkClassList,value
        }
    }
}
</script>

<style lang="scss" scoped>
  .addCategory{
    width: 33.3%;
    margin: 0 auto;
    .btn{
      padding: 5px 20px;
      position: relative;
      left: 50%;
      transform: translateX(-50%)
    }
  }
</style>